前言

嗨，我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我，進而獲得更多資訊唷！

未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文、英文、日文、簡體中文
觀看分類：React 白話文運動、其他系列

如果想要快速查找其他文章請點選目錄

成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人，
都可以透過 Hogan.tech 嘗試進入程式領域。

在進入到React相關知識之前，先來幫讀者複習有關JavaScript的知識，因此此篇會講解

1. JavaScript 的歷史
2. let、const、var 差異
3. 樣板字面值（Template Literals）
4. 箭頭函式（Arrow Function）

以上有關於中文翻譯，目前採用MDN官方中譯，有筆誤 也歡迎讀者留言

JavaScript 的歷史

Brendan Eich 在1995 年發表了 JavaScript，最初JavaScript主要功用為網頁中的一些簡單功能實作。之後有了Ajax、Jquery、React.js、Vue.js、Node.js、TypeScript，漸漸的JavaScript變成一個主流前相當廣用的程式語言之一，從前端、後端開發都可以做使用。

可能有些讀者知道ES5、ES6，但是那個ES又是什麼呢？

ES的全名為ECMAScript 其中ECMA為歐洲電腦製造商協會的縮寫（European Computer Manufacrurers Association），後面的數字則是第幾代，因此ES5為ECMAScript第五代，ES6為ECMAScript第六代。

那麼ES1至ES4這幾代的版本為何不常聽見呢？

主要原因為 1997年ES1問世之後，還是在簡單的功能實作，ES2、ES3、ES4則是分別修正了一些問題或是新增了正規表達式以及字串處理，等到了2009年ES5的出現，才真正有了相當多的功能，包含擴充的陣列方法、物件屬性、JSON。

ES6則是於2015年出現，並且又新增了相當多方便且有用的功能，這些功能也被實作在各類型的JavaScript應用中。

如果有想要深入瞭解歷史脈絡的讀者，也可以參考

https://www.w3schools.com/js/js_history.asp

var、let、const 差異

1. var

var 是一個ES5 比較早期的宣告方式，使用var 就可以做宣告，並且是函數區域（ function-scoped）或是全域（globally-scoped）

2. let

let 是一個ES6 比較近期的宣告方式，使用let 就可以做宣告。除了實作了靜態變數域（Lexical Variable Scope）使用大括號也會產生一個程式區塊（Code Block），在let的宣告中，此變數會是區塊區域（block-scoped）。

3. const

const是一個ES6 比較近期的宣告方式，使用const 就可以做宣告，並且是區塊區域（block-scoped）
const 與 let 最大的差別，就是const 是一個不會被重新指定的值。

var 以及let 差異

快速用兩種程式碼來展示差異，先使用ES5中的var做宣告，可以發現在判別式中再次宣告後，離開判別式中的程式區塊（Code Block），變數依然程式區塊中宣告後的值。

var input = "Global";
if(input){
	var input = "Block";
	console.log("input");
	// 會輸出變數 Block 
}
console.log("input");
// 會輸出變數 Block

這邊如果再次使用ES6中的let做宣告，可以發現在判別式中再次宣告後，其影響範圍只會在程式區塊（Code Block）之中，變數則是不會影響到外部的全域變數（global variable）

let input = "Global";
if(input){
	let input = "Block";
	console.log("input");
	// 會輸出 Block 
}
console.log("input");
// 會輸出 Global

透過上述舉例中，應該可以發現到ES5中的var宣告在區塊中宣告，會污染到其他相同命名的變數，因此現在主流宣告都是使用let或是const去做宣告

樣板字面值（Template literals）

這邊使用的是MDN WEB的專有名詞，並且使用其中文翻譯，不過也有地方會稱作樣板字串（Template String）
在傳統JavaScript語法中，我們會使用加號來去做字串的串連，然而這樣傳統的語法卻相當不直覺

console.log("Hello, This is "+ Name + " and My Phone Number is" + PhoneNumber)

樣板字面值Template literals語法出現後，我們可以使用反引號（back-tick）將字串進行封閉，並且在字串中，透過錢字號與大括號 ${} 來放置變數，如果將以上程式碼進行改寫的話，會變成以下

console.log(`Hello, This is ${Name} and My Phone Number is ${PhoneNumber}`)

可以看到整個字串變得更簡潔易懂。

箭頭函式（Arrow function）

宣告（Define）

在傳統ES5語法中，使用以下語法做宣告，開頭有一個關鍵字function來做宣告，後面接著是函式的名稱，再由大括號來將函式內的實作包起來。

function printHelloWorld() {
    console.log("Hello World")
}

var printHelloWorld = function() {
    console.log("Hello World")
}

另一種宣告方式為函式表達式（Function Expression），先宣告一個變數，再將一個函數指定給此變數。

提吊（Hoist）

這邊也講一個有關函式的觀念，這邊兩種不同的宣告方式，分別為函式宣告與函式指定。在函式宣告中會被提吊（Hoist），但是函式指定則是不會。

printHelloWorld()
function printHelloWorld() {
    console.log("Hello World")
}
// 這樣執行是沒有問題的

printHelloWorld()
var printHelloWorld = function() {
    console.log("Hello World")
}
// 這樣執行是有問題的

參數傳遞

在傳統ES5中，函數中是可以傳遞參數的，這邊正規的名詞為引數（Argument）

function printHello(name) {
    console.log(`Hello,My Name is ${name}`)
}
printHello("Hogan")

但如果在使用函數時，沒有給與引數的值呢？

會顯示 Hello,My Name is undefined

在ES6中，也有提供函數預設值，只要在函數宣告中，直接將引述做指定給值，就可以避免問題了

function printHello(name = "Hogan") {
    console.log(`Hello,My Name is ${name}`)
}

printHello()
    // Hello,My Name is Hogan
printHello("Bo Bo")
    // Hello,My Name is Bo Bo

箭頭函數式（Arrow Function）

箭頭函數式（Arrow Function）是ES6中新增的功能之一，他可以在不使用function關鍵字下去做函式宣告，甚至可以不用給與函數名稱以及回傳值。

在未來的React實作中，也會相當常去使用箭頭函數是，是一個相當重要且好用的功能。

以下為傳統ES5的函數指定宣告方式，有關鍵字function以及return

var printHello = function(name) {
    return ("Hello " + name)
}

console.log(printHello("Hogan"))

透過箭頭函數式（Arrow Function）則可以改寫成以下

const printHello = (name) => `Hello ${name}`

console.log(printHello("Hogan"))

結語

這篇針對JavaScript ES6中的一些新功能以及概念做了介紹，並且使用程式碼進行講解。

讓讀者在進入React語法之前，複習一下原本的JavaScript語法。

如果有任何建議與疑問也歡迎留言！

如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～